<!doctype html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" lang="ru"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" lang="ru"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="ru"><![endif]-->
<!--[if gt IE 8]><!--><html lang="ru"><!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>css-framework - руководство</title>

		<link href="css/framework.css" rel="stylesheet">
		<link href="docs/css/f-docs.css" rel="stylesheet">
		<link href="docs/css/prettify.css" rel="stylesheet">
		<script src="docs/js/jquery-1.7.2.min.js"></script>
		<script src="docs/js/prettify.js"></script>
		<script src="docs/js/jquery.scrollTo.js"></script>
		<script src="docs/js/jquery.nav.min.js"></script>
		<!--[if lt IE 9]>
			<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="g">
		<div class="f-nav-bar f-nav-bar-fixed">
			<div class="f-nav-bar-body">
				<div class="f-nav-bar-title">
					<a href="http://agat.github.com/css-framework/">css-framework</a>
				</div><!-- f-nav-bar-title -->
				<ul class="f-nav" id="nav">
					<li><a href="#use">Подключить</a></li>
					<li><a href="#grid">Макет</a></li>
					<li><a href="#navigation">Навигация</a></li>
					<li><a href="#typography">Типографика</a></li>
					<li><a href="#images">Иллюстрации</a></li>
					<li><a href="#columns">Колонки</a></li>
					<li><a href="#forms">Формы</a></li>
				</ul><!-- f-nav -->
				<ul class="f-nav f-nav-right">
					<li><a href="https://github.com/agat/css-framework/issues/new">Написать об ошибке</a></li>
				</ul><!-- f-nav -->
			</div><!-- f-nav-bar-body -->
		</div><!-- f-nav-bar -->
		<section id="home" class="g-row">
			<div class="g-12">
				<div class="f-teaser">
					<h1 class="logo"><span class="logo-c">css</span><span class="logo-">-</span><span class="logo-f">framework</span></h1>
					<p class="f-teaser-download f-buttons">
						<a href="https://raw.github.com/agat/css-framework/master/css/framework.css" class="f-bu f-bu-default">загрузить css-framework v4.0.2</a><a href="https://github.com/agat/css-framework" class="f-bu">проект на GitHub</a>
					</p>
					<h2>HTML/CSS шаблон для создания веб-интерфейсов</h2>
				</div><!-- f-teaser -->
				<div class="g-row">
					<div class="g-4">
						<h3>Лёгкий</h3>
						<p>Увеличит размер вашего проекта всего на:</p>
						<ul>
							<li>5 <abbr title="Кибибайт">KiB</abbr> сжатая(zip) версия</li>
							<li>13 KiB уменьшенная(minify) версия</li>
						</ul>
					</div><!-- g-4 -->
					<div class="g-4">
						<h3>Совместимый</h3>
						<p>Безопасная деградацию для старых браузеров не поддерживающих CSS3 в полном объёме.</p>
						<p>Не навредит вашему проекту, так как использует префикс &laquo;f-&raquo; для всех блоков, что исключает конфликт имён.</p>
					</div><!-- g-4 -->
					<div class="g-4">
						<h3>Стильный</h3>
						<p>Используя динамический язык стилевой разметки <a href="http://lesscss.ru/">LESS</a> вы можете гибко менять макет сайта, основные цвета, размеры шрифтов, отступы и поля блоков в вашем проекте.</p>
					</div><!-- g-4 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-4">
						<h3>Стандартный</h3>
						<p>Поддерживает современные стандарты веб-разработки HTML5 и CSS3.</p>
					</div><!-- g-4 -->
					<div class="g-4">
						<h3>Простой</h3>
						<p>При создании этого фреймворка было использовано минимальное количество HTML элементов.</p>
						<p>Весь фреймворк размещается в одном файле.</p>
					</div><!-- g-4 -->
					<div class="g-4">
						<h3>Социальный</h3>
						<p>Проект размещается на площадке GitHub: <a href="https://github.com/agat/css-framework">/agat/css-framework</a>.</p>
						<ul>
							<li><a href="https://github.com/agat/css-framework/zipball/master">Загрузить всё с документацией</a></li>
							<li><a href="https://github.com/agat/css-framework/issues/new">Написать об ошибке</a></li>
						</ul>
					</div><!-- g-4 -->
				</div><!-- g-row -->
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="use" class="g-row">
			<div class="g-12">
				<h2>Как подключить</h2>
				<pre class="prettyprint linenums">&lt;!doctype html&gt;
&lt;!--[if lt IE 7]&gt;&lt;html class="lt-ie9 lt-ie8 lt-ie7" lang="ru"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;&lt;html class="lt-ie9 lt-ie8" lang="ru"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;&lt;html class="lt-ie9" lang="ru"&gt;&lt;![endif]--&gt;
&lt;!--[if gt IE 8]&gt;&lt;!--&gt;&lt;html lang="ru"&gt;&lt;!--&lt;![endif]--&gt;
	&lt;head&gt;
		...
		&lt;link href="/css/<a href="https://raw.github.com/agat/css-framework/master/css/framework.css">framework.css</a>" rel="stylesheet"&gt;
		...
		&lt;!--[if lt IE 9]&gt;
			&lt;script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
		&lt;![endif]--&gt;
	&lt;/head&gt;</pre>
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="grid" class="g-row">
			<div class="g-12">
				<h2>Макет страницы</h2>
				<p>Макет(layout) сайта создается с помощью портированного и оптимизированного кода из <a href="http://960.gs/">960 Grid System</a>. 12 колонок, основной блок шириной <code>60px</code>, расстояние между колонками и рядами <code>20px</code>.</p>
				<h3>Основа</h3>
				<p>Основой разметки служит родительский блок с классом <code>class="g"</code>. В нём следует расположить контейнер с классом <code>class="g-row"</code>, который разделяет разметку на ряды.</p>
				<p>Контейнеры с классами <code>class="g-x"</code> позволяют создавать различные конфигурации колонок в рядах.</p>
<pre class="prettyprint linenums">&lt;div class=&quot;g&quot;&gt;
	&lt;div class=&quot;g-row&quot;&gt;
		&lt;div class=&quot;g-5&quot;&gt;
			...
		&lt;/div&gt;&lt;!-- g-5 --&gt;
		&lt;div class=&quot;g-7&quot;&gt;
			...
		&lt;/div&gt;&lt;!-- g-7 --&gt;
	&lt;/div&gt;&lt;!-- g-row --&gt;
&lt;/div&gt;&lt;!-- g --&gt;</pre>
				<h4>Демонстрация 12-колоночной разметки</h4>
				<div class="f-demo">
					<div class="g-row grid-demo">
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
						<div class="g-1">
							<code>g-1</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-2">
							<code>g-2 - 140px</code>
						</div><!-- g -->
						<div class="g-2">
							<code>g-2</code>
						</div><!-- g -->
						<div class="g-2">
							<code>g-2</code>
						</div><!-- g -->
						<div class="g-2">
							<code>g-2</code>
						</div><!-- g -->
						<div class="g-2">
							<code>g-2</code>
						</div><!-- g -->
						<div class="g-2">
							<code>g-2</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-3">
							<code>"g-3" - 220px</code>
						</div><!-- g -->
						<div class="g-3">
							<code>"g-3"</code>
						</div><!-- g -->
						<div class="g-3">
							<code>"g-3"</code>
						</div><!-- g -->
						<div class="g-3">
							<code>"g-3"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-4">
							<code>"g-4" - 300px</code>
						</div><!-- g -->
						<div class="g-4">
							<code>"g-4"</code>
						</div><!-- g -->
						<div class="g-4">
							<code>"g-4"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-5">
							<code>"g-5" - 380px</code>
						</div><!-- g -->
						<div class="g-7">
							<code>"g-7"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-6">
							<code>"g-6" - 460px</code>
						</div><!-- g -->
						<div class="g-6">
							<code>"g-6"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-7">
							<code>"g-7" - 540px</code>
						</div><!-- g -->
						<div class="g-5">
							<code>"g-5"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-8">
							<code>"g-8" - 620px</code>
						</div><!-- g -->
						<div class="g-4">
							<code>"g-4"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-9">
							<code>"g-9" - 700px</code>
						</div><!-- g -->
						<div class="g-3">
							<code>"g-3"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-10">
							<code>"g-10" - 780px</code>
						</div><!-- g -->
						<div class="g-2">
							<code>"g-2"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-11">
							<code>"g-11" - 860px</code>
						</div><!-- g -->
						<div class="g-1">
							<code>"g-1"</code>
						</div><!-- g -->
					</div><!-- g-row -->
					<div class="g-row grid-demo">
						<div class="g-12">
							<code>"g-12" - 940px</code>
						</div><!-- g -->
					</div><!-- g-row -->
				</div><!-- f-demo -->
				<h3>Вложенные колонки</h3>
				<p>Для создания более сложных разметок вы можете вкладывать контейнеры <code class="prettyprint">&lt;div class=&quot;g-row&quot;&gt;...&lt;/div&gt;</code> друг в друга:</p>
<pre class="prettyprint linenums">&lt;div class=&quot;g&quot;&gt;
	&lt;div class=&quot;g-row&quot;&gt;				&lt;!-- 1 уровень --&gt;
		&lt;div class=&quot;g-6&quot;&gt;
			&lt;div class=&quot;g-row&quot;&gt;			&lt;!-- 2 уровень --&gt;
				&lt;div class=&quot;g-1&quot;&gt;...&lt;/div&gt;
				&lt;div class=&quot;g-4&quot;&gt;...&lt;/div&gt;
				&lt;div class=&quot;g-1&quot;&gt;...&lt;/div&gt;
			&lt;/div&gt;&lt;!-- g-row --&gt;
			&lt;div class=&quot;g-row&quot;&gt;			&lt;!-- 2 уровень --&gt;
				&lt;div class=&quot;g-2&quot;&gt;...&lt;/div&gt;
				&lt;div class=&quot;g-2&quot;&gt;...&lt;/div&gt;
				&lt;div class=&quot;g-2&quot;&gt;...&lt;/div&gt;
			&lt;/div&gt;&lt;!-- g-row --&gt;
		&lt;/div&gt;&lt;!-- g-6 --&gt;
		&lt;div class=&quot;g-6&quot;&gt;
			&lt;div class=&quot;g-row&quot;&gt;			&lt;!-- 2 уровень --&gt;
				&lt;div class=&quot;g-6&quot;&gt;...&lt;/div&gt;
			&lt;/div&gt;&lt;!-- g-row --&gt;
			&lt;div class=&quot;g-row&quot;&gt;			&lt;!-- 2 уровень --&gt;
				&lt;div class=&quot;g-3&quot;&gt;...&lt;/div&gt;
				&lt;div class=&quot;g-3&quot;&gt;...&lt;/div&gt;
			&lt;/div&gt;&lt;!-- g-row --&gt;
		&lt;/div&gt;&lt;!-- g-6 --&gt;
	&lt;/div&gt;&lt;!-- g-row --&gt;
&lt;/div&gt;&lt;!-- g --&gt;</pre>
				<h4>Пример вложенных колонок</h4>
				<div class="f-demo">
					<div class="g-row grid-demo">
						<div class="g-6">
							<div class="g-row grid-demo">
								<div class="g-1">
									<code>"g-1"</code>
								</div><!-- g -->
								<div class="g-4">
									<code>"g-4"</code>
								</div><!-- g -->
								<div class="g-1">
									<code>"g-1"</code>
								</div><!-- g -->
							</div><!-- g-row -->
							<div class="g-row grid-demo">
								<div class="g-2">
									<code>"g-2"</code>
								</div><!-- g -->
								<div class="g-2">
									<code>"g-2"</code>
								</div><!-- g -->
								<div class="g-2">
									<code>"g-2"</code>
								</div><!-- g -->
							</div><!-- g-row -->
						</div><!-- g -->
						<div class="g-6">
							<div class="g-row grid-demo">
								<div class="g-6">
									<code>"g-6"</code>
								</div><!-- g -->
							</div><!-- g-row -->
							<div class="g-row grid-demo">
								<div class="g-3">
									<code>"g-3"</code>
								</div><!-- g -->
								<div class="g-3">
									<code>"g-3"</code>
								</div><!-- g -->
							</div><!-- g-row -->
						</div><!-- g -->
					</div><!-- g-row -->
				</div><!-- f-demo -->
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="navigation" class="g-row">
			<div class="g-12">
				<h2>Навигация</h2>
				<h3>Горизонтальная навигация</h3>
				<p>Для создания простейшей горизонтальной навигации нужно списку задать класс <code class="prettyprint">&lt;ul class="f-nav"&gt;...&lt;/ul&gt;</code>:</p>
<pre class="prettyprint linenums">&lt;ul class=&quot;f-nav&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Первый пункт&lt;/a&gt;&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Второй активный&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Третий&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Последний пункт&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;!-- f-nav --&gt;</pre>
				<p>Активный пункт навигации выделяется с помощью класса <code>.active</code>.</p>
				<p>Получится вот такое навигационное меню:</p>
				<ul class="f-nav">
					<li><a href="#">Первый пункт</a></li>
					<li class="active"><a href="#">Второй активный</a></li>
					<li><a href="#">Третий</a></li>
					<li><a href="#">Последний пункт</a></li>
				</ul><!-- f-nav -->
				<h4>Горизонтальные вкладки</h4>
				<p>Существует дополнительный класс <code>.f-nav-tabs</code>, который изменяет дизайн горизонтальной навигации:</p>
<pre class="prettyprint linenums">&lt;ul class=&quot;f-nav f-nav-tabs&quot;&gt;
	...
&lt;/ul&gt;&lt;!-- f-nav-tabs --&gt;</pre>
				<ul class="f-nav f-nav-tabs">
					<li><a href="#">Первый пункт</a></li>
					<li class="active"><a href="#">Второй активный</a></li>
					<li><a href="#">Третий</a></li>
					<li><a href="#">Последний пункт</a></li>
				</ul><!-- f-nav-tabs -->
				<h3>Вертикальная навигация</h3>
				<p>Для создания вертикальной навигации нужно списку задать класс <code>.f-nav-list</code>:</p>
				<div class="g-row">
					<div class="g-9">
<pre class="prettyprint linenums">&lt;ul class="f-nav-list"&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Первый пункт&lt;/a&gt;&lt;/li&gt;
	&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Второй активный&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Третий&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Последний пункт&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;!-- f-nav-list --&gt;</pre>
					</div><!-- g-9 -->
					<div class="g-3">
						<ul class="f-nav-list">
							<li><a href="#">Первый пункт</a></li>
							<li class="active"><a href="#">Второй активный</a></li>
							<li><a href="#">Третий</a></li>
							<li><a href="#">Последний пункт</a></li>
						</ul><!-- f-nav-list -->
					</div><!-- g-3 -->
				</div><!-- g-row -->
				<h4>Вертикальные вкладки</h4>
				<div class="g-row">
					<div class="g-9">
						<p>Для создания вертикальной навигации в виде вкладок дополните предыдущий пример классом <code>.f-nav-tabs</code>:</p>
<pre class="prettyprint linenums">&lt;ul class="f-nav-list f-nav-tabs"&gt;
	...
&lt;/ul&gt;&lt;!-- f-nav-tabs --&gt;</pre>
					</div><!-- g-9 -->
					<div class="g-3">
						<ul class="f-nav-list f-nav-tabs">
							<li><a href="#">Первый пункт</a></li>
							<li class="active"><a href="#">Второй активный</a></li>
							<li><a href="#">Третий</a></li>
							<li><a href="#">Последний пункт</a></li>
						</ul><!-- f-nav-tabs -->
					</div><!-- g-3 -->
				</div><!-- g-row -->
				<h3>Навигационная панель</h3>
				<p>Состоит из двух главных элементов, <code>.f-nav-bar</code> и дочернего <code>.f-nav-bar-body</code>. Внутри можно разместить логотип(<code>.f-nav-bar-title</code>) и навигацию(<code>.f-nav</code>):</p>
<pre class="prettyprint linenums">&lt;div class="f-nav-bar"&gt;
	&lt;div class="f-nav-bar-body"&gt;
		&lt;div class="f-nav-bar-title"&gt;
			&lt;a href="#"&gt;css-framework&lt;/a&gt;
		&lt;/div&gt;&lt;!-- f-nav-bar-title --&gt;
		&lt;ul class="f-nav"&gt;
			&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;&lt;!-- f-nav --&gt;
	&lt;/div&gt;&lt;!-- f-nav-bar-body --&gt;
&lt;/div&gt;&lt;!-- f-nav-bar --&gt;</pre>
				<div class="f-nav-bar">
					<div class="f-nav-bar-body">
						<div class="f-nav-bar-title">
							<a href="#">css-framework</a>
						</div><!-- f-nav-bar-title -->
						<ul class="f-nav">
							<li><a href="#grid">Макет страницы</a></li>
							<li class="active"><a href="#navigation">Навигация</a></li>
							<li><a href="#typography">Типографика</a></li>
							<li><a href="#images">Иллюстрации</a></li>
							<li><a href="#columns">Колонки</a></li>
							<li><a href="#forms">Формы</a></li>
						</ul><!-- f-nav -->
					</div><!-- f-nav-bar-body -->
				</div><!-- f-nav-bar -->
				<h4>Фиксированная навигационная панель</h4>
				<p>При желании, навигационная панель можно зафиксировать в верхней части окна, дополнив её классом <code>.f-nav-bar-fixed</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-nav-bar f-nav-bar-fixed"&gt;
	...
&lt;/div&gt;&lt;!-- f-nav-bar-fixed --&gt;</pre>
				<h3>&laquo;Хлебные крошки&raquo;</h3>
				<p>Навигация типа - &laquo;хлебные крошки&raquo; создаётся из обычного списка с присвоенным классом <code class="prettyprint">&lt;ul class="f-breadcrumbs"&gt;...&lt;/ul&gt;</code>:</p>
<pre class="prettyprint linenums">&lt;ul class="f-breadcrumbs"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Категория&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Вложенная категория&lt;/a&gt;&lt;/li&gt;
	&lt;li class="cur"&gt;Продукт&lt;/li&gt;
&lt;/ul&gt;&lt;!-- f-breadcrumb --&gt;</pre>
				<h4>Пример &laquo;хлебных крошек&raquo;</h4>
				<ul class="f-breadcrumbs">
					<li><a href="#">Главная</a></li>
					<li><a href="#">Категория</a></li>
					<li><a href="#">Вложенная категория</a></li>
					<li class="cur">Продукт</li>
				</ul><!-- f-breadcrumb -->
				<h3>Постраничные ссылки</h3>
				<p>Класс <code class="prettyprint">&lt;div class="f-pager"&gt;...&lt;/div&gt;</code> служит основой для постраничной навигации. Внутри располагается список ссылок.</p>
				<p>Ссылки &laquo;Вперёд&raquo; и &laquo;Назад&raquo; отделяются от основных классами <code>.f-pager-prev</code> и <code>.f-pager-next</code>. Активный элемент - классом <code>.active</code>.</p>
<pre class="prettyprint linenums">&lt;div class="f-pager"&gt;
	&lt;ul&gt;
		&lt;li class="f-pager-prev"&gt;&lt;a href="#"&gt;&amp;#10094; Назад&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
		&lt;li class="active"&gt;&lt;strong&gt;2&lt;/strong&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
		&lt;li class="f-pager-next"&gt;&lt;a href="#"&gt;Вперёд &amp;#10095;&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;&lt;!-- f-pager --&gt;</pre>
				<p>По умолчанию, постраничная навигация выровненна по центру:</p>
				<div class="f-pager">
					<ul>
						<li class="f-pager-prev"><a href="#">&larr; Назад</a></li>
						<li><a href="#">1</a></li>
						<li><strong class="active">2</strong></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li>...</li>
						<li><a href="#">20</a></li>
						<li><a href="#">21</a></li>
						<li><a href="#">22</a></li>
						<li><a href="#">23</a></li>
						<li class="f-pager-next"><a href="#">Вперёд &rarr;</a></li>
					</ul>
				</div><!-- f-pager -->
				<p>Её можно выровнять влево, дополнительным классом <code>.f-pager-left</code>:</p>
				<div class="f-pager f-pager-left">
					<ul>
						<li class="f-pager-prev"><a href="#">&larr; Назад</a></li>
						<li><a href="#">1</a></li>
						<li><strong class="active">2</strong></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li>...</li>
						<li><a href="#">20</a></li>
						<li><a href="#">21</a></li>
						<li><a href="#">22</a></li>
						<li><a href="#">23</a></li>
						<li class="f-pager-next"><a href="#">Вперёд &rarr;</a></li>
					</ul>
				</div><!-- f-pager -->
				<p>Или вправо, классом <code>.f-pager-right</code>:</p>
				<div class="f-pager f-pager-right">
					<ul>
						<li class="f-pager-prev"><a href="#">&larr; Назад</a></li>
						<li><a href="#">1</a></li>
						<li><strong class="active">2</strong></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li>...</li>
						<li><a href="#">20</a></li>
						<li><a href="#">21</a></li>
						<li><a href="#">22</a></li>
						<li><a href="#">23</a></li>
						<li class="f-pager-next"><a href="#">Вперёд &rarr;</a></li>
					</ul>
				</div><!-- f-pager -->
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="typography" class="g-row">
			<div class="g-12">
				<h2>Типографика</h2>
				<h3>Заголовки и параграфы</h3>
				<p>Для заголовков и параграфов, по умолчанию, заданы размеры шрифта и нижние отступы.</p>
				<hr>
				<h1>Заголовок первого уровня (H1)</h1>
				<p>Силовое поле, в согласии с традиционными представлениями, возбуждает циркулирующий гамма-квант - все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться.</p>
				<p>Темная материя мономолекулярно испускает кварк, генерируя периодические импульсы синхротронного излучения.</p>
				<h2>Заголовок второго уровня (H2)</h2>
				<p>Под воздействием переменного напряжения молекула едва ли квантуема.</p>
				<h3>Заголовок третьего уровня (H3)</h3>
				<p>Сверхпроводник бифокально ускоряет барионный экситон по мере распространения сигнала в среде с инверсной населенностью.</p>
				<h4>Заголовок четвертого уровня (H4)</h4>
				<p>Неустойчивость, как известно, быстро разивается, если экситон возбуждает лептон, однозначно свидетельствуя о неустойчивости процесса в целом.</p>
				<hr>
				<h3>Таблицы</h3>
				<p>Дальше вы увидите, какие красивые таблицы получаются с помощью стандартной разметки для таблиц:</p>
<pre class="prettyprint linenums">&lt;table&gt;
	&lt;caption&gt;...&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;...&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tfoot&gt;
		&lt;tr&gt;
			&lt;th&gt;...&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/tfoot&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;...&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</pre>
				<table>
					<caption>5 самых распространённых браузеров - февраль 2012</caption>
					<thead>
					<tr>
						<th class="w-5">&#8470;</th>
						<th>Название браузера(тег th)</th>
						<th>%</th>
					</tr>
					</thead>
					<tfoot>
					<tr>
						<th colspan="3">Подвал таблицы(тег tfoot)</th>
					</tr>
					</tfoot>
					<tbody>
					<tr>
						<td>1</td>
						<td>Internet Explorer</td>
						<td>37,45</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Chrome</td>
						<td>28,40</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Firefox</td>
						<td>24,78</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Safari</td>
						<td>6,62</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Opera</td>
						<td>1,95</td>
					</tr>
					</tbody>
				</table>
				<p>Для удобства восприятия ячеек таблицы можно раскрасить нечётные ряды с помощью класса <code class="prettyprint">&lt;table class="f-table-zebra"&gt;...&lt;/table&gt;</code>.</p>
				<table class="f-table-zebra">
					<thead>
					<tr>
						<th class="w-5">&#8470;</th>
						<th>Название браузера(тег th)</th>
						<th>%</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>1</td>
						<td>Internet Explorer</td>
						<td>37,45</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Chrome</td>
						<td>28,40</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Firefox</td>
						<td>24,78</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Safari</td>
						<td>6,62</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Opera</td>
						<td>1,95</td>
					</tr>
					</tbody>
				</table>
				<h3>Обычные, нумерованные списки и списки определений</h3>
				<div class="g-row">
					<div class="g-4">
						<p>Обычный список <code>&lt;ul&gt;</code>:</p>
						<ul>
							<li>первый элемент обычного</li>
							<li>ненумерованного списка</li>
							<li>третий пункт</li>
							<li>последний пункт</li>
						</ul>
					</div><!-- g-4 -->
					<div class="g-4">
						<p>Нумерованный список <code>&lt;ol&gt;</code>:</p>
						<ol>
							<li>это нумерованный список</li>
							<li>второй элемент</li>
							<li>третий</li>
							<li>и последний</li>
						</ol>
					</div><!-- g-4 -->
					<div class="g-4">
						<p>Список определений <code>&lt;dl&gt;</code>:</p>
						<dl>
							<dt>Первый термин, тег <code>&lt;dt&gt;</code></dt>
							<dd>Определение термина, тег <code>&lt;dd&gt;</code></dd>
							<dt>Второй термин</dt>
							<dd>Длинное определение второго термина</dd>
						</dl>
					</div><!-- g-4 -->
				</div><!-- g-row -->
				<h3>Теги оформлления контента</h3>
				<h4>Строчные теги:</h4>
				<table>
					<tr>
						<th>Элемент</th>
						<th>Пример использования</th>
					</tr>
					<tr>
						<td><code>&lt;a href="#"&gt;...&lt;/a&gt;</code></td>
						<td><a href="#">ссылка</a></td>
					</tr>
					<tr>
						<td><code>&lt;i&gt;</code> и <code>&lt;em&gt;</code></td>
						<td><i>курсивный</i> и <em>акцентированный</em> текст</td>
					</tr>
					<tr>
						<td><code>&lt;b&gt;</code> и <code>&lt;strong&gt;</code></td>
						<td><b>жирный</b> и <strong>акцентированный</strong> текст</td>
					</tr>
					<tr>
						<td><code>&lt;mark&gt;</code></td>
						<td><mark>выделенный</mark> текст</td>
					</tr>
					<tr>
						<td><code> &lt;small&gt;</code></td>
						<td><small>маленький</small> текст</td>
					</tr>
					<tr>
						<td><code>&lt;abbr title="..."&gt;...&lt;/abbr&gt;</code></td>
						<td><abbr title="Shoulder of Pork and hAM («свиные лопатки и окорока»)">спам</abbr></td>
					</tr>
					<tr>
						<td><code>&lt;cite&gt;</code> и <code>&lt;q&gt;</code></td>
						<td><cite>цитата</cite> и <q>выделенная цитата</q></td>
					</tr>
					<tr>
						<td><code>&lt;code&gt;</code> и <code>&lt;dfn&gt;</code></td>
						<td><code>исходный код</code> и <dfn>новый термин</dfn></td>
					</tr>
					<tr>
						<td><code>&lt;kbd&gt;</code></td>
						<td>«горячая» клавиша <kbd>&lt;Ctrl&gt;+&lt;S&gt;</kbd></td>
					</tr>
					<tr>
						<td><code>&lt;var&gt;</code> и <code>&lt;samp&gt;</code></td>
						<td>имя переменной <var>variableName</var> и <samp>текст из консоли</samp></td>
					</tr>
					<tr>
						<td><code>&lt;ins&gt;</code> и <code>&lt;del&gt;</code></td>
						<td><ins>добавленный текст</ins> и <del>удалённый текст</del></td>
					</tr>
					<tr>
						<td><code>&lt;sub&gt;</code> и <code>&lt;sup&gt;</code></td>
						<td>текст в <sub>нижнем</sub> и <sup>верхнем</sup> индексе</td>
					</tr>
				</table>
				<h3>Блочные теги</h3>
				<p>Тег <code>&lt;blockquote&gt;</code> для длинных цитат:</p>
				<blockquote>
					<p><strong>Цита́та</strong> — дословная выдержка из какого-либо текста. При этом важно, что цитируемый текст однозначно идентифицируется как вставленный.</p>
					<p><cite>https://ru.wikipedia.org/wiki/Цитата</cite></p>
				</blockquote>
				<p>Пример тега <code>&lt;hr&gt;</code>:</p>
				<hr>
				<address>Калининградская обл., г. Черняховск, ул. 22 Января, тег <code>&lt;address&gt;</code></address>
				<pre>Пример форматированного текста, тег &lt;pre&gt;...&lt;/pre&gt;</pre>
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="images" class="g-row">
			<div class="g-12">
				<h2>Иллюстрации</h2>
				<h3>Картинка и текст</h3>
				<p>Класс <code>.f-bwi</code> используется для блоков с текстом и картинкой. Картинке задан класс <code>.f-bwi-pic</code>. Текст находится в контейнере с классом <code>.f-bwi-text</code>.</p>
<pre class="prettyprint linenums">&lt;div class="f-bwi"&gt;
	&lt;img class="f-bwi-pic" src="..." alt="..." /&gt;
	&lt;div class="f-bwi-text"&gt;
		...
	&lt;/div&gt;&lt;!-- f-bwi-text --&gt;
&lt;/div&gt;&lt;!-- f-bwi --&gt;</pre>
				<div class="f-bwi">
					<img class="f-bwi-pic" src="http://placehold.it/200x100" width="200" height="100" alt="" />
					<div class="f-bwi-text">
						<h3>Плазменный пульсар: основные моменты</h3>
						<p>Гамма-квант полупрозрачен для жесткого излучения. Фронт растягивает экзотермический квазар по мере распространения сигнала в среде с инверсной населенностью.</p>
					</div><!-- f-bwi-text -->
				</div><!-- f-bwi -->
				<p>Чтобы выровнять картинку по правому краю, нужно дополнительно назначить блоку класс <code>.f-bwi-right</code>.</p>
<pre class="prettyprint linenums">&lt;div class="f-bwi f-bwi-right"&gt;
	...
&lt;/div&gt;&lt;!-- f-bwi --&gt;</pre>
				<div class="f-bwi f-bwi-right">
					<img class="f-bwi-pic" src="http://placehold.it/200x100" width="200" height="100" alt="" />
					<div class="f-bwi-text">
						<h3>Плазменный пульсар: основные моменты</h3>
						<p>Гамма-квант полупрозрачен для жесткого излучения. Фронт растягивает экзотермический квазар по мере распространения сигнала в среде с инверсной населенностью.</p>
					</div><!-- f-bwi-text -->
				</div><!-- f-bwi -->
				<h3>Галерея</h3>
				<p>Для набора изображений предусмотрен класс <code>.f-gallery</code> для контейнера и <code>.f-gallery-item</code> для элемента галереи, которые комбинируется с классами разметки страницы:</p>
<pre class="prettyprint linenums">&lt;div class="g-row f-gallery"&gt;
	...
	&lt;div class="g-2 f-gallery-item"&gt;
		&lt;a href="#"&gt;&lt;img src="http://placehold.it/130x80" width="140" height="80" alt="pic" /&gt;
 		&lt;small&gt;Название картинки&lt;/small&gt;&lt;/a&gt;
	&lt;/div&gt;&lt;!-- f-gallery-item --&gt;
	...
&lt;/div&gt;&lt;!-- f-gallery --&gt;</pre>
				<div class="g-row f-gallery">
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
					<div class="g-2 f-gallery-item">
						<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
							<small>Название картинки</small></a>
					</div><!-- g-2 -->
				</div><!-- f-gallery -->
				<p>Эти элементы комбинируются со знакомыми уже нам классами макета страницы <code>.g-row, .g-1, .g-2, .g-3</code> и т.д.. Позволяющими задавать любую ширину галереи картинок.</p>
				<div class="f-demo">
					<div class="g-row f-gallery">
						<div class="g-5 f-gallery-item">
							<a href="#"><img src="http://placehold.it/370x208" width="370" height="208" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-5 -->
						<div class="g-4 f-gallery-item">
							<a href="#"><img src="http://placehold.it/290x80" width="290" height="80" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-4 -->
						<div class="g-3 f-gallery-item">
							<a href="#"><img src="http://placehold.it/210x80" width="210" height="80" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-4 -->
						<div class="g-2 f-gallery-item">
							<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-2 -->
						<div class="g-2 f-gallery-item">
							<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-2 -->
						<div class="g-2 f-gallery-item">
							<a href="#"><img src="http://placehold.it/130x80" width="130" height="80" alt="pic" />
								<small>Название картинки</small></a>
						</div><!-- g-2 -->
					</div><!-- f-gallery -->
				</div><!-- f-demo -->
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="columns" class="g-row">
			<div class="g-12">
				<h2>Колонки</h2>
				<p>Для создания колонок с одинаковой шириной содержимого и фиксированным расстоянием между ними применяется родительский элемент <code>.f-col-x</code> с вложенными <code>.f-column</code>. Где <code>x</code> может быть 1, 2, 3 или 4.</p>
				<h4>2 колонки</h4>
				<p>Для создания 2-ух колонок(шириной 50%/50%) требуется родительский элемент <code>.f-col-2</code> с вложенными 2 элементами <code>.f-column</code>.</p>
<pre class="prettyprint linenums">&lt;div class="f-col-2"&gt;
	&lt;div class="f-column"&gt;
		...
	&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;div class="f-column"&gt;
		...
	&lt;/div&gt;&lt;!-- f-column --&gt;
&lt;/div&gt;&lt;!-- f-col-2 --&gt;</pre>
				<div class="f-demo">
					<div class="f-col-2">
						<div class="f-column">
							<p>Это 2 колонки. Каждая колонка шириной 50%.</p>
						</div><!-- f-column -->
						<div class="f-column">
							<p>Это 2 колонки. Каждая колонка шириной 50%.</p>
						</div><!-- f-column -->
					</div><!-- f-col-2 -->
				</div><!-- f-demo -->
				<h3>3 колонки</h3>
				<p>Для создания 3-ёх колонок(каждая шириной 33.3%) требуется родительский элемент <code>.f-col-3</code> с вложенными элементами <code>.f-column</code> вот таким образом.</p>
<pre class="prettyprint linenums">&lt;div class="f-col-3"&gt;
	&lt;div class="f-column"&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;div class="f-column"&gt;
		...
	&lt;/div&gt;&lt;!-- f-column --&gt;
&lt;/div&gt;&lt;!-- f-col-3 --&gt;</pre>
				<div class="f-demo">
					<div class="f-col-3">
						<div class="f-column">
							<div class="f-column">
								<p>Это 3 колонки. Каждая колонка шириной 33%.</p>
							</div><!-- f-column -->
							<div class="f-column">
								<p>Это 3 колонки. Каждая колонка шириной 33%.</p>
							</div><!-- f-column -->
						</div><!-- f-column -->
						<div class="f-column">
							<p>Это 3 колонки. Каждая колонка шириной 33%.</p>
						</div><!-- f-column -->
					</div><!-- f-col-3 -->
				</div><!-- f-demo -->
				<h3>4 колонки</h3>
				<p>Для создания 4-х колонок(каждая шириной 25%) требуется родительский элемент <code>.f-col-4</code> с вложенными элементами <code>.f-column</code>.</p>
<pre class="prettyprint linenums">&lt;div class="f-col-4"&gt;
	&lt;div class="f-column"&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;div class="f-column"&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
		&lt;div class="f-column"&gt;
			...
		&lt;/div&gt;&lt;!-- f-column --&gt;
	&lt;/div&gt;&lt;!-- f-column --&gt;
&lt;/div&gt;&lt;!-- f-col-4 --&gt;</pre>
				<div class="f-demo">
					<div class="f-col-4">
						<div class="f-column">
							<div class="f-column">
								<p>Это 4 колонки. Каждая колонка шириной 25%.</p>
							</div><!-- f-column -->
							<div class="f-column">
								<p>Это 4 колонки. Каждая колонка шириной 25%.</p>
							</div><!-- f-column -->
						</div><!-- f-column -->
						<div class="f-column">
							<div class="f-column">
								<p>Это 4 колонки. Каждая колонка шириной 25%.</p>
							</div><!-- f-column -->
							<div class="f-column">
								<p>Это 4 колонки. Каждая колонка шириной 25%.</p>
							</div><!-- f-column -->
						</div><!-- f-column -->
					</div><!-- f-col-4 -->
				</div><!-- f-demo -->
			</div><!-- g-12 -->
		</section><!-- g-row -->
		<section id="forms" class="g-row">
			<div class="g-12">
				<h2>Формы</h2>
				<h3>Текстовые поля</h3>
				<div class="g-row">
					<div class="g-5">
						<p>Для создания текстового поля достаточно написать:</p>
						<pre class="prettyprint linenums">&lt;input type="text"&gt;
&lt;input type="password"&gt;</pre>
					</div><!-- g-5 -->
					<div class="g-7">
						<p>Получиться вот такое симпатичное поле ввода:</p>
						<p><input type="text"></p>
						<p><input type="password"></p>
					</div><!-- g-7 -->
				</div><!-- g-row -->
				<h3>Кнопки</h3>
				<div class="g-row">
					<div class="g-5">
						<p>Для создания кнопок применяется класс <code>.f-bu</code>:</p>
<pre class="prettyprint linenums">&lt;button class="f-bu"&gt;Button&lt;/button&gt;
&lt;span class="f-bu"&gt;Span&lt;/span&gt;
&lt;a href="#" class="f-bu"&gt;Ссылка&lt;/a&gt;</pre>
					</div><!-- g-5 -->
					<div class="g-7">
						<p>Этот класс можно назначать на тэги <code>&lt;button&gt;</code>, <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>:</p>
						<p><button class="f-bu">Button</button> <span class="f-bu">Span</span> <a href="#" class="f-bu">Ссылка</a></p>
					</div><!-- g-7 -->
				</div><!-- g-row -->
				<p>Цветовое кодирование кнопок с помощью классов: <code>.f-bu-default</code>, <code>.f-bu-success</code>, <code>.f-bu-warning</code></p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint">&lt;button class="f-bu f-bu-default"&gt;Основное действие&lt;/button&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<p><button class="f-bu f-bu-default">Основное действие</button></p>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint">&lt;button class="f-bu f-bu-success"&gt;Хорошая кнопка&lt;/button&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<p><button class="f-bu f-bu-success">Хорошая кнопка</button></p>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint">&lt;button class="f-bu f-bu-warning"&gt;Плохая кнопка&lt;/button&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<p><button class="f-bu f-bu-warning">Плохая кнопка</button></p>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<p>Группировка кнопок в группы с помощью родительского класса <code>.f-buttons</code>:</p>
				<div class="g-row">
					<div class="g-5">
<pre class="prettyprint linenums">&lt;p class="f-buttons"&gt;
	&lt;span class="f-bu"&gt;1&lt;/span&gt;
	&lt;span class="f-bu"&gt;2&lt;/span&gt;
	&lt;span class="f-bu"&gt;3&lt;/span&gt;
	...
&lt;/p&gt;&lt;!-- f-buttons --&gt;</pre>
					</div><!-- g-5 -->
					<div class="g-7">
						<p class="f-buttons"><span class="f-bu">1</span><span class="f-bu">2</span><span class="f-bu">3</span><span class="f-bu">4</span><span class="f-bu">5</span></p>
					</div><!-- g-7 -->
				</div><!-- g-row -->
				<h3>Радио-кнопки и флажки</h3>
				<p>Простейшая конструкция из минимального набора необходимых элементов, таких как <code>&lt;label&gt;</code> и <code>&lt;input&gt;</code>.</p>
				<p>Радио-кнопки помечаются классом <code>.f-radio</code> на элементе <code>&lt;label&gt;</code>. Флажки классом <code>.f-check</code>.</p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint linenums">&lt;label class="f-radio"&gt;&lt;input type="radio"&gt; радио-кнопка&lt;/label&gt;
&lt;label class="f-check"&gt;&lt;input type="checkbox"&gt; флажок&lt;/label&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<p><label class="f-radio"><input type="radio"> радио-кнопка</label><br>
						<label class="f-check"><input type="checkbox"> флажок</label></p>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<h3>Раскрывающийся список</h3>
				<p>Никаких классов, только <code>&lt;select&gt;</code> и <code>&lt;option&gt;</code>.</p>
				<div class="g-row">
					<div class="g-6">
<pre class="prettyprint linenums">&lt;select&gt;
	&lt;option&gt;Раскрывающийся список&lt;/option&gt;
	&lt;option&gt;Второй элемент&lt;/option&gt;
	&lt;option&gt;Третий элемент&lt;/option&gt;
&lt;/select&gt;</pre>
					</div><!-- g-6 -->
					<div class="g-6">
						<select>
							<option>Раскрывающийся список</option>
							<option>Второй элемент</option>
							<option>Третий элемент</option>
						</select>
					</div><!-- g-6 -->
				</div><!-- g-row -->
				<h3>Размеры полей ввода</h3>
				<p>Чтобы задать ширину, воспользуемся классами <code>.g-x</code>.</p>
				<div class="g-row">
					<div class="g-6">
						<p>Где <code>x</code> может меняться от 1 до 12.</p>
						<p>Размеры можно задавать кнопкам, раскрывающимся спискам и текстовым полям:</p>
<pre class="prettyprint linenums">&lt;button class="f-bu g-1"&gt;.g-1&lt;/button&gt;
&lt;input type="text" class="g-2" value=".g-2"&gt;
&lt;input type="text" class="g-3" value=".g-3"&gt;
&lt;select class="g-4"&gt;&lt;option&gt;.g-4&lt;/option&gt;&lt;/select&gt;
&lt;textarea class="g-5"&gt;.g-5&lt;/textarea&gt;</pre>
					</div><!-- g-6 -->
					<div class="g-6">
						<p><button class="f-bu g-1">.g-1</button></p>
						<p><input type="text" class="g-2" value=".g-2"></p>
						<p><input type="text" class="g-3" value=".g-3"></p>
						<p><select class="g-4"><option>.g-4</option></select></p>
						<p><textarea class="g-5">.g-5</textarea></p>
					</div><!-- g-6 -->
				</div><!-- g-row -->
				<h3>Простая форма</h3>
				<p>Расположение элементов формы в одну строку.</p>
<pre class="prettyprint">&lt;label&gt;Метка: &lt;input type="text" class="g-2"&gt;&lt;/label&gt; &lt;label class="f-check"&gt;&lt;input type="checkbox"&gt; переключатель&lt;/label&gt; &lt;button class="f-bu"&gt;Кнопка&lt;/button&gt;</pre>
				<p>
					<label>Метка: <input type="text" class="g-2"></label> <label class="f-check"><input type="checkbox"> переключатель</label> <button class="f-bu">Кнопка</button>
				</p>
				<div class="g-row">
					<div class="g-7">
						<form action="/">
							<fieldset>
								<legend>Вертикальная форма</legend>
								<div class="f-row">
									<label for="text">Поле ввода:</label>
									<div class="f-input">
										<input id="text" type="text" class="g-4">
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label for="text2">Поле с подсказками:</label>
									<div class="f-input">
										<input id="text2" type="text" class="g-2"> <span class="f-input-comment">Основной комметарий</span>
										<p class="f-input-help">Подсказка или дополнительный комментарий...</p>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label>Радио-кнопки:</label>
									<div class="f-input">
										<label class="f-radio"><input type="radio"> одна</label> за <label class="f-radio"><input type="radio"> другой</label>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label>Радио-кнопки:</label>
									<div class="f-input">
										<label class="f-radio"><input type="radio"> одна</label> под<br>
										<label class="f-radio"><input type="radio"> другой</label>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label for="select">Раскрывающийся список:</label>
									<div class="f-input">
										<select id="select" class="g-4">
											<option>Первый элемент</option>
											<option>Второй элемент</option>
											<option>Третий элемент</option>
										</select>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label>Флажки:</label>
									<div class="f-input">
										<label class="f-check"><input type="checkbox"> флажки </label> в <label class="f-check"><input type="checkbox"> ряд</label>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label>Флажки:</label>
									<div class="f-input">
										<label class="f-check"><input type="checkbox"> один</label> под<br>
										<label class="f-check"><input type="checkbox"> другим</label>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label for="textarea">Текстовое поле:</label>
									<div class="f-input">
										<textarea id="textarea" class="g-4" rows="4" cols="50"></textarea>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-actions">
									<button type="submit" class="f-bu">Кнопка</button>
								</div><!-- f-actions -->
							</fieldset>
						</form>
					</div><!-- g-7 -->
					<div class="g-5">
						<br>
						<br>
						<p>Основной компонент формы, это контейнер с классом <code>.f-row</code> и двумя элементами внутри. Метки и элемента с классом <code>.f-input</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-row"&gt;
	&lt;label&gt;...&lt;/label&gt;
	&lt;div class="f-input"&gt;
	...
	&lt;/div&gt;&lt;!-- f-input --&gt;
&lt;/div&gt;&lt;!-- f-row --&gt;</pre>
						<p>В элементе <code>.f-input</code> размещаются поля ввода, радио-кнопки и др..</p>
						<p>Комментарии и пояснения создаются классами <code>.f-input-inline</code> и <code>.f-input-help</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-input"&gt;
	&lt;input type="text"&gt;
	&lt;span class="f-input-comment"&gt;
		Основной комментарий
	&lt;/span&gt;
	&lt;p class="f-input-help"&gt;
		Подсказка...
	&lt;/p&gt;
&lt;/div&gt;</pre>
						<p>Управляющие кнопки, размещаются в контейнере с классом <code>.f-actions</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-actions"&gt;
	&lt;button type="submit" class="f-bu"&gt;Кнопка&lt;/button&gt;
&lt;/div&gt;&lt;!-- f-actions --&gt;</pre>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-7">
						<form class="f-horizontal" action="/">
							<fieldset>
								<legend>Горизонтальная форма</legend>
								<div class="f-row">
									<label for="text3">Поле ввода:</label>
									<div class="f-input">
										<input id="text3" type="text" class="g-6">
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-row">
									<label for="textarea2">Текстовое поле:</label>
									<div class="f-input">
										<textarea id="textarea2" class="g-6" rows="4" cols="50"></textarea>
									</div><!-- f-input -->
								</div><!-- f-row -->
								<div class="f-actions">
									<button type="submit" class="f-bu">Кнопка</button>
								</div><!-- f-actions -->
							</fieldset>
						</form><!-- f-horizontal -->
					</div><!-- g-7 -->
					<div class="g-5">
						<br>
						<br>
						<p>Отличается от вертикальной формы наличием дополнительного родительского класса <code>.f-horizontal</code>:</p>
<pre class="prettyprint linenums">&lt;form class="f-horizontal"&gt;
	&lt;div class="f-row"&gt;...&lt;/div&gt;
&lt;/form&gt;&lt;!--f-horizontal --&gt;</pre>
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<h3>Состояния полей ввода</h3>
				<div class="g-row">
					<div class="g-8">
						<div class="f-row">
							<label>Заблокированные поля:</label>
							<div class="f-input">
								<input type="text" class="g-4" disabled value="Поле ввода">
							</div><!-- f-input -->
							<div class="f-input">
								<input type="password" class="g-4" disabled value="Поле ввода пароля">
							</div><!-- f-input -->
							<div class="f-input">
								<select class="g-4" disabled><option>Список</option></select>
							</div><!-- f-input -->
							<div class="f-input">
								<label class="f-check"><input type="checkbox" disabled> флажок</label>
							</div><!-- f-input -->
							<div class="f-input">
								<label class="f-radio"><input type="radio" disabled> радио-кнопка</label>
							</div><!-- f-input -->
							<div class="f-input">
								<button class="f-bu" disabled="disabled">Кнопка</button>
							</div><!-- f-input -->
							<div class="f-input">
								<textarea class="g-4" rows="4" cols="50" disabled>Текстовое поле ввода</textarea>
							</div><!-- f-input -->
						</div><!-- f-row -->
					</div><!-- g-8 -->
					<div class="g-4">
						<p>Поля ввода блокируются добавлением бинарного атрибута <code>disabled</code>:</p>
<pre class="prettyprint">&lt;input type="text" disabled &gt;</pre>
					</div><!-- g-3 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-8">
						<div class="f-row">
							<label>Валидные поля:</label>
							<div class="f-input f-valid">
								<input type="text" class="g-4" value="Поле ввода"> <span class="f-input-comment">Валидное</span>
							</div><!-- f-input -->
							<div class="f-input f-valid">
								<input type="password" class="g-4" value="Поле ввода пароля"> <span class="f-input-comment">Валидное</span>
							</div><!-- f-input -->
							<div class="f-input f-valid">
								<select class="g-4"><option>Список</option></select> <span class="f-input-comment">Валидный</span>
							</div><!-- f-input -->
							<div class="f-input f-valid">
								<label class="f-check"><input type="checkbox"> Валидный флажок</label> <span class="f-input-comment"></span>
							</div><!-- f-input -->
							<div class="f-input f-valid">
								<label class="f-radio"><input type="radio"> Валидная радио-кнопка</label> <span class="f-input-comment"></span>
							</div><!-- f-input -->
							<div class="f-input f-valid">
								<textarea class="g-4" rows="4" cols="50">Текстовое поле ввода</textarea> <span class="f-input-comment"></span>
							</div><!-- f-input -->
						</div><!-- f-row -->
					</div><!-- g-8 -->
					<div class="g-4">
						<p>Валидные поля обозначаются добавлением класса <code>.f-valid</code> к элементу <code>.f-input</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-input f-valid"&gt;
	...
&lt;/div&gt;&lt;!--f-input --&gt;</pre>
					</div><!-- g-4 -->
				</div><!-- g-row -->
				<div class="g-row">
					<div class="g-8">
						<div class="f-row">
							<label>Невалидные поля:</label>
							<div class="f-input f-invalid">
								<input type="text" class="g-4" value="Поле ввода"> <span class="f-input-comment">Невалидное</span>
							</div><!-- f-input -->
							<div class="f-input f-invalid">
								<input type="password" class="g-4" value="Поле ввода пароля"> <span class="f-input-comment">Невалидное</span>
							</div><!-- f-input -->
							<div class="f-input f-invalid">
								<select class="g-4"><option>Список</option></select> <span class="f-input-comment">Невалидный</span>
							</div><!-- f-input -->
							<div class="f-input f-invalid">
								<label class="f-check"><input type="checkbox"> Невалидный флажок</label> <span class="f-input-comment"></span>
							</div><!-- f-input -->
							<div class="f-input f-invalid">
								<label class="f-radio"><input type="radio"> Невалидная радио-кнопка</label> <span class="f-input-comment"></span>
							</div><!-- f-input -->
							<div class="f-input f-invalid">
								<textarea class="g-4" rows="4" cols="50">Текстовое поле ввода</textarea> <span class="f-input-comment"></span>
							</div><!-- f-input -->
						</div><!-- f-row -->
					</div><!-- g-8 -->
					<div class="g-4">
						<p>Невалидные поля обозначаются добавлением класса <code>.f-invalid</code> к элементу <code>.f-input</code>:</p>
<pre class="prettyprint linenums">&lt;div class="f-input f-invalid"&gt;
	...
&lt;/div&gt;&lt;!--f-input --&gt;</pre>
					</div><!-- g-4 -->
				</div><!-- g-row -->
				<h3>Сообщения</h3>
				<p>Блок с классом <code>.f-message</code> предназначен для вывода сообщений.</p>
				<p>Самый простой пример сообщения:</p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint linenums">&lt;div class="f-message"&gt;
	&lt;span class="close"&gt;&lt;/span&gt;
	&lt;strong&gt;Внимание&lt;/strong&gt;, текст простого сообщения
&lt;/div&gt;&lt;!--f-message --&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<div class="f-message">
							<span class="close"></span>
							<strong>Внимание</strong>, текст простого сообщения
						</div><!--f-message -->
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<p>Сообщение с заголовком, текстом и кнопками, используется дополнительный элемент <code>.f-message-actions</code>:</p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint linenums">&lt;div class="f-message"&gt;
	&lt;span class="close"&gt;&lt;/span&gt;
	&lt;h5&gt;Заголовок сообщения&lt;/h5&gt;
	&lt;p&gt;Пример сообщения с заголовком и кнопками&lt;/p&gt;
	&lt;p class="f-message-actions"&gt;
		&lt;a class="f-bu" href="#"&gt;Да&lt;/a&gt;
		&lt;a class="f-bu" href="#"&gt;Отмена&lt;/a&gt;
	&lt;/p&gt;
&lt;/div&gt;&lt;!--f-message --&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<div class="f-message">
							<span class="close"></span>
							<h5>Заголовок сообщения</h5>
							<p>Пример сообщения с заголовком и кнопками</p>
							<p class="f-message-actions"><a class="f-bu" href="#">Да</a> <a class="f-bu" href="#">Отмена</a></p>
						</div><!--f-message -->
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<p>Помимо простого сообщения, можно использовать класс <code>.f-message-error</code> для сообщений об ошибках:</p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint linenums">&lt;div class="f-message f-message-error"&gt;
	...
&lt;/div&gt;&lt;!--f-message --&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<div class="f-message f-message-error">
							<span class="close"></span>
							<strong>Доступ запрещён,</strong> сообщения об ошибке
						</div><!-- f-message-->
					</div><!-- g-5 -->
				</div><!-- g-row -->
				<p>Для удачных сообщений существует класс <code>.f-message-success</code>:</p>
				<div class="g-row">
					<div class="g-7">
<pre class="prettyprint linenums">&lt;div class="f-message f-message-success"&gt;
	...
&lt;/div&gt;&lt;!--f-message --&gt;</pre>
					</div><!-- g-7 -->
					<div class="g-5">
						<div class="f-message f-message-success">
							<span class="close"></span>
							<strong>Поздравляем</strong>, всё прошло очень хорошо :)
						</div><!-- f-message -->
					</div><!-- g-5 -->
				</div><!-- g-row -->
			</div><!-- g-12 -->
		</section><!-- g-row -->

		<script>
			prettyPrint();
			$('#nav').onePageNav({
				currentClass: 'active',
				changeHash: true
			});
		</script>
	</body>
</html>